<script setup lang="ts">
import {computed} from 'vue'
import { ref } from 'vue';
import {useFoodStore} from '../stores/counter'
const store = useFoodStore()
const list = [
    {
        text:'建议少吃',
        min:0,
        max:40,
        list:[]
    },
    {
        text:'适量食用',
        min:40,
        max:70,
        list:[]
    },
    {
        text:'放心食用',
        min:70,
        max:100,
        list:[]
    },
]

const curIndex = ref(0)

const tabList = computed(() => {
    return list.map((item,index) => {
        return {
           ...item,
            list:store.compareList.filter((food) => {
                return Number(food.glycemicIndex) >= item.min && Number(food.glycemicIndex) < item.max
            })
        }
    })
})



</script>

<template>
    <div class="page">
        <nav>
            <div v-for="(item,index) in tabList" :key="item.text"
            :class="['nav-item',{active:curIndex === index}]"
            @click="curIndex = index"
            >
                <h4>{{ item.text }}</h4>
                <p>{{ item.list.length }}</p>
            </div>
        </nav>
        <div class="list">
            <div class="item" 
            v-for="item in tabList[curIndex].list" 
            :key="item.name"
            >
            <img :src="item.imgUrl" alt="">
            <h4>{{ item.name }}</h4>
            <p>{{ item.content }}</p>
            </div>
        </div>
    </div>
</template> 

<style lang="scss" scoped>
.page{
    height: 100vh;
    display: flex;
    flex-direction: column;
}
nav {
    display: flex;
}
.nav-item {
    flex: 1;
    text-align: center;
    padding: 10px;
    background: #ccc;
}
.active{
    background: orange;
}
.list {
    flex: 1;
    overflow: auto;
    padding: 10px;
}
.item {
    background: #FFF;
    margin-bottom: 10px;
}



</style>
